<template>
  <div class="third-step">
    <div class="all-discount">
      <span style="float:left;display:block; margin-left:10px;color:#326f8f">
        已选择 {{ tableData.length }} 门课程,批量打
        <el-input v-model="allDiscount" style="width:60px;" @blur="setDiscount"/>折 (折后价是最低折扣作用于课程原价的结果，而不是作用于当前价格的结果)
      </span>
    </div>
    <div class="table">
      <el-table
        ref="manageTable"
        :data="tableData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
        tooltip-effect="dark"
        style="width: 100%"
        border
      >
        <el-table-column label="课程名称" min-width="10" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handlePush(scope)">{{ scope.row.title }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="课程教师" min-width="10" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleUserDialog(scope)">{{ scope.row.userName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="planNum" label="教学计划数" min-width="10" align="center"/>
        <el-table-column prop="price" label="价格" min-width="10" align="center"/>
        <el-table-column prop="discount" label="打折" min-width="10" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.discount" style="width:60px;"/>
          </template>
        </el-table-column>
        <el-table-column prop="discountPrice" label="折后价" min-width="10" align="center">
          <template slot-scope="scope">
            {{ scope.row.discount?Number(scope.row.price) * Number(scope.row.discount) / 10 : Number(scope.row.price) }}
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :current-page="currentpage"
        :page-size="pagesize"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
      <div style="width:100%">
        <el-button type="primary" style="float:right;" @click="next">下一步</el-button>
        <el-button style="float:right;margin-right:20px;" @click="back">上一步</el-button>
      </div>
      <user-dialog
        :visiabledialog="userdialog"
        :dialog-data="dialogData"
        @changeVisiable="userdialog = false"
      />
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import UserDialog from '@/components/Dialog'
import { getUserDetail } from '@/api/operate/userDetail' // 数据接口
import { updateCourse } from '@/api/subject/course' // 数据接口
export default {
  name: 'Thirdstep',
  components: {
    UserDialog,
    Pagination
  },
  props: {
    tableData: {
      type: Array,
      default() {
        return []
      }
    },
    id: {
      type: Number,
      default() {
        return 0
      }
    }
  },
  data() {
    return {
      allDiscount: '',
      discount: '',
      total: 1,
      currentpage: 1,
      pagesize: 10,
      userdialog: false,
      dialogData: {}
    }
  },
  watch: {
    allDiscount(val) {
      this.discount = val
    }
  },
  methods: {
    setDiscount() {
      if (this.allDiscount) {
        this.tableData.map(item => {
          item.discount = this.allDiscount
        })
      }
    },
    handleSizeChange(val) {
      this.currentpage = 1
      this.pagesize = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleCurrentChange(val) {
      this.currentpage = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handlePush(scope) {
      // 跳转到门户网站
      console.log(scope.row)
    },
    handleUserDialog(scope) {
      // 个人信息dialog
      getUserDetail(scope.row.userId).then(response => {
        this.dialogData = response.data.item
      })
      this.userdialog = true
    },
    next() {
      this.tableData.forEach(item => {
        item.discountId = this.id
        item.discountPrice = item.discount ? Number(item.price) * Number(item.discount) / 10 : Number(item.price)
        updateCourse(item)
      })
      this.$emit('thirdNext')
    },
    back() {
      this.$emit('thirdBack')
    }
  }
}
</script>

<style lang="scss">
.third-step {
  .table {
    margin-top: 21px;
  }
  .all-discount {
    width: 100%;
    height: 60px;
    line-height: 60px;
    margin-top: 20px;
    background-color: #d9edf7;
  }
}
</style>
